<#import "../tpl/pageTep.ftl" as page>
<@page.pageBase currentMenu="线下订单">
<style>
    .control-group p {
        margin: 1px 0 0 20px;
        float: left;
        font-size: 13px;
        text-align: left;
        line-height: 30px;
    }

    .order-details {
        width: 100%;
    }

    .order {
        width: 60%;
        float: left;
    }

    .panel-header {
        color: #333333;
        background-color: #f5f5f5;
        border-color: #dddddd;
    }

    .button-large {
        padding: 10px 30px;
        font-size: 16px;
    }

    #content {
        margin-top: 8px;
    }
</style>
<div class="xm-offline">
    <div class="row">
        <div class="panel">
            <div class="form-horizontal">
                <div class="panel-header">
                    <a href="${basepath}/rest/manage/order/toList">返回上一级</a>
                </div>
                <div class="panel-body">

                    <h3>订单详情</h3>
                    <hr>
                    <div class="order-details">
                        <div class="order">
                            <div class="control-group">
                                <label class="control-label">
                                    订单号：
                                </label>
                                <p>${e.orderID!}</p>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    订单时间：
                                </label>
                                <p>${e.createTime!}</p>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    买家帐号：
                                </label>
                                <p>${e.userName!}</p>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    订单状态：
                                </label>
                                <p id="typeBtn"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <h3>菜单清单
                    <a class="button button-primary pull-right" style="height:20px" id="addBtn" onclick="">增加</a>
                        <a class="button button-primary printOrder pull-right" style="height:20px;margin-right: 10px;"
                        >打印</a>
                    </h3>
                    <hr>
                    <div id="grid"></div>
                </div>
                <div class="panel-body">
                    <h3>费用信息</h3>
                    <hr>
                    <form id="detailForm" class="form-horizontal">
                        <div class="control-group ptotal-div">
                            <label class="control-label ">
                                <s>*</s>
                                预计支付：
                            </label>
                            <div class="controls">
                                <input type="text" class="control-text span-width span8"
                                       disabled value="${e.ptotal!}">
                            </div>
                        </div>
                        <div class="finishDiv">
                            <div class="control-group">
                                <label class="control-label">
                                    餐盒费：
                                </label>
                                <div class="controls">
                                    <input type="text" class="control-text span-width span8" value="${e.boxPrice!}"
                                           disabled>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    配送费：
                                </label>
                                <div class="controls">
                                    <input type="text" class="control-text span-width span8" value="${e.sendPrice!}"
                                           disabled>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    <s>*</s>
                                    使用优惠：
                                </label>
                                <div class="controls">
                                    <input type="text" class="control-text span-width span8" value="" id="discount"
                                           disabled>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    <s>*</s>
                                    收益支付：
                                </label>
                                <div class="controls">
                                    <input type="text" class="control-text span-width span8" value="${e.income!}"
                                           disabled>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    <s>*</s>
                                    余额支付：
                                </label>
                                <div class="controls">
                                    <input type="text" class="control-text span-width span8" value="${e.balance!}"
                                           disabled>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    <s>*</s>
                                    实际支付：
                                </label>
                                <div class="controls">
                                    <input type="text" class="control-text span-width span8" value="${e.ptotal!}"
                                           disabled>
                                </div>
                            </div>
                    </form>
                </div>
            </div>
            <div class="panel-body">
                <h3>用餐信息</h3>
                <hr>
                <form id="detailForm" class="form-horizontal">
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            用餐方式：
                        </label>
                        <div class="controls">
                            <input type="text" class="control-text span-width span8" value="线下点餐"
                                   disabled>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            用餐店铺：
                        </label>
                        <div class="controls">
                            <input type="text" class="control-text span-width span8" value="${e.storeName!}"
                                   disabled name="ptotal">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            用餐桌号：
                        </label>
                        <div class="controls">
                            <input type="text" class="control-text span-width span8" value="${e.seatNumber!}"
                                   disabled name="ptotal">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            排队号：
                        </label>
                        <div class="controls">
                            <input type="text" class="control-text span-width span8" value="${e.lineUpNumber!}"
                                   disabled name="lineUpNumber">
                        </div>
                    </div>
            </div>
        </div>
        <div class="centered" id="centeredBtn">
            <button class="button  button-large  button-success" type="button" id="saveBtn">确认付款</button>
        </div>
    </div>
<#-------------------------------------------------------新增商品-------------------------------------------------------->
    <div id="addGoods" style="display:none;" >
        <form id="GoodsForm" class="form-horizontal">
                <div class="control-group span16 " style="margin-bottom: 20px">
                    <label class="control-label">选择分类：</label>
                    <select name="transType" class="type">
                     </select>
                </div>
                <div class="control-group span16 " style="margin-bottom: 20px">
                    <label class="control-label">选择商品：</label>
                    <select name="transType" class="goods" >
                        </select>
                </div>
                <div class="control-group span16 " style="margin-bottom: 20px">
                    <label class="control-label">选择规格：</label>
                    <select name="transType" class="spec" >
                       </select>
                </div>
        </form>
    </div>
</div>
<script>
    var Grid = BUI.Grid,
            Store = BUI.Data.Store,
            columns = [
                {title: '商品名称', dataIndex: 'productName', elCls: 'center', width: '20%'},
                {
                    title: '商品图片',
                    dataIndex: 'productPicture',
                    elCls: 'center',
                    width: '20%',
                    renderer: function (value) {
                        return '<img src="/' + value + '" style="width:110px;height:110px"/>';
                    }
                },
                {title: '商品规格', dataIndex: 'specInfo', elCls: 'center', width: '20%'},
                {title: '下单数量', dataIndex: 'number', elCls: 'center', width: '20%'},
                {title: '商品单价', dataIndex: 'price', elCls: 'center', width: '20%'},
                {title: '操作', dataIndex: 'id', elCls: 'center', width: '20%',renderer:function (value,obj,index) {
                        return '<a href="javascript:deleteOne(' + value + ','+index+')">删除</a>';
                    }}
            ];
    var store = new Store({
                url: '/rest/manage/order/selectOrderDetail',
                autoLoad: true, //自动加载数据
                params: { //配置初始请求的参数
                    length: '10',
                    orderID: '${e.orderID!}'
                },
                pageSize: 10,	// 配置分页数目
                root: 'data',
                totalProperty: 'total'
            }),
            grid = new Grid.Grid({
                render: '#grid',
                columns: columns,
                width: '100%',
                loadMask: true, //加载数据时显示屏蔽层
                store: store
            });
    grid.render();

        var status = '${e.status!}';
        if (status == "init") {
            $("#typeBtn").text('待付款');
            $("#finishDiv").hide()//隐藏费用信息一些内容
        }else if(status == "pass"){
            $("#typeBtn").text('待发货');
        }else {
            $("#typeBtn").text('已完成');
            $("#ptotal-div").hide();
            $("#addBtn").hide();//隐藏添加按钮
            $("#centeredBtn").hide();//隐藏确认付款按钮
        }
    var productIDs = [], nums = [], specIDs = [];
    var voucherName = '${e.voucherName!}',
            discount = '${e.discount!}';
    //判断打折是否有值，没有值的情况下，取值 voucherName优惠卷
    if (discount != '' && discount!= null) {
        if (voucherName != '' && voucherName != null) {
            $("#discount").val(voucherName);
        } else {
            $("#discount").val(discount * 10 + '折');
        }
    }else {
        $("#discount").val('无');
    }
    (function querySpec() {
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: '/rest/manage/order/selectOrderDetail',
            data: {orderID: '${e.id!}'},
            success: function (data) {
                var list = data.data;
                $.each(list, function (i, o) {
                    productIDs.push(o.id);
                    nums.push(o.number);
                    specIDs.push(o.specInfo)
                });
            }

        })
    })();
    var storeId=${e.storeID!};
    (function (storeId) {
        $.ajax({
            type: 'GET',
            dataType:'json',
            data:{id:storeId},
            async:false,
            url:'/rest/manage/store/selectDetail',
            success:function (data) {
                printObj={
                    KEY: data.data.printKey,
                    SN:data.data.printSn
                };
            }
        })
    })(storeId);
    (function () {
        $.ajax({
            type: 'POST',
            url: '/rest/manage/order/selectOrderDetail',
            async: false,
            dataType: 'json',
            data: {
                orderID:${e.orderID!}
            },
            success: function (data) {
                var list = data.data, name, tip,val='',waterArr=[],eatArr=[],pizzaArr=[];
                $.each(list, function (i, e) {
                  var space= ' '.repeat(22-e.productName.length*2);
                    name = '' + e.productName + ''+space+'' + e.number + '   ' + e.dtotal + '';
                    tip = '(' + e.specInfo + ')';
                    val += name + '<BR>' + tip + '<BR>';
                    switch (e.productPrintType){
                        case '1':waterArr.push({'productName':e.productName,'cartNum':e.number,'specName':e.specInfo});break;
                        case '2':eatArr.push({'productName':e.productName,'cartNum':e.number,'specName':e.specInfo});break;
                        case '3':pizzaArr.push({'productName':e.productName,'cartNum':e.number,'specName':e.specInfo});break;
                    }
                });
                productObj={waterArr,eatArr,pizzaArr};
                goodsstr=val;
            }
        })
    })();
    (function () {
        $.ajax({
            type: 'GET',
            url: '/rest/manage/voucher/selectDetail',
            async: false,
            dataType: 'json',
            success: function (data) {
                var voucher = data.data ? '使用优惠：                ' + data.data + '' : '使用优惠：                 无';
                info = voucher + '<BR>';
            }
        })
    })();
    var goodsstr , info, discount = '',printObj,productObj;
    if ('${e.discount!}'<1){
        discount = "使用折扣：                ${e.discount*10!} 折<BR>"
    };

    $('.printOrder').click(function(){
        var waterhtml='',pizzahtml='',eathtml='', drink='',eat='',product='';
        var max = Math.max( productObj.waterArr.length,productObj.eatArr.length,productObj.pizzaArr.length, );
        for (var j=0;j<max;j++){
            waterhtml+= productObj.waterArr[j]?'' + productObj.waterArr[j].productName + ' '+" ".repeat(22-productObj.waterArr[j].productName.length*2)+ ' ' +  productObj.waterArr[j].cartNum + ''+'<BR>'+ ' ' +  productObj.waterArr[j].specName + ' '+'<BR>':'';
            eathtml+=productObj.eatArr[j]?'' + productObj.eatArr[j].productName + ' '+" ".repeat(22-productObj.eatArr[j].productName.length*2) + ' ' +  productObj.eatArr[j].cartNum + ''+'<BR>'+ ' ' + productObj.eatArr[j].specName + ' ' +'<BR>':'';
            pizzahtml+=productObj.pizzaArr[j]? '' + productObj.pizzaArr[j].productName + ' '+" ".repeat(22-productObj.pizzaArr[j].productName.length*2) + ' '+  productObj.pizzaArr[j].cartNum + ''+'<BR>'+ ' ' +productObj.pizzaArr[j].specName + ' '+'<BR>':'';
        }
        if (productObj.waterArr.length){
            drink=     '--------------------------------<BR>'  + '所属区域：             吧台'+"<BR>"+ '名称　　　　　           数量<BR>'+waterhtml+'--------------------------------<BR>';
        }
        if(productObj.eatArr.length){
            eat=     '--------------------------------<BR>'+ '所属区域：             后厨'+"<BR>"+ '名称　　　　　           数量<BR>'  +eathtml+'--------------------------------<BR>';
        }
        if(productObj.pizzaArr.length){
            product=    '--------------------------------<BR>'+'所属区域：             窑区'+"<BR>" + '名称　　　　　           数量<BR>'  +pizzahtml+'--------------------------------<BR>';
        }
        BUI.Message.Confirm('确认确认打印？',function(){
            $.ajax({
                type: 'POST',
                url: '/rest/manage/order/printOrder',
                dataType: 'json',
                data: $.extend(printObj,{
                    content: "<CB>味爱${e.storeName!}</CB><BR>" +
                    "下单时间：${e.createTime!}<BR><BR>"+
                    "********************************<BR>" +
                    "名称　　　　　       数量  单价<BR>" +
                    "--------------------------------<BR>" +
                    goodsstr+
                    "<C>-----------费用信息----------</C><BR>" +
                    "使用余额：                ${e.balance!}元<BR>" +
                    "使用收益：                ${e.income!}元<BR>" +
                    info+discount+
                    "实际支付：                ${e.ptotal!}元<BR>" +
                    "<C>-----------用餐信息----------</C><BR>" +
                    "用餐方式：              线下订单<BR>" +
                    "用餐店铺：            ${e.storeName!}<BR>" +
                    "排队号：                   ${e.lineUpNumber!}<BR>" +
                    "<C>--扫描二维码关注味爱公众号--</C><BR>" +
                    "<QR>http://pisa.2017jdk.com/rest/front/user/toWx</QR>"+drink+eat+product,
                }),
                beforeSend: function() {$('.print').attr('onclick','javascript:void();'); },
                complete: function() {$('.print').attr('onclick','print()'); }
            })
        },'question')
    });
    $("#saveBtn").click(function () {
        $.ajax({
            type: "POST",
            url: "/rest/manage/order/updateOrderStatus",
            dataType: "jsonp",
            data: {
                id: '${e.id!}',
                userID: '${e.userID!}',
                discount: '${e.discount!}',
                ptotal: '${e.ptotal!}',
                ototal: '${e.ototal!}',
                payType: "order",
                type: '${e.type!}',
                submitType: "cart",
                seatNumber:'${e.seatNumber!}',
                storeID: '${e.storeID!}',
                status: "finish",
                productIDs: productIDs.join(),
                productAmount: nums.join(),
                specIDs: specIDs.join()
            },
            success: function (data) {
                window.location.href = '/rest/manage/order/toList';
            }
        });
    });
    $('#addBtn').click(function () {
        addDialog.show();
        queryDetail('/rest/manage/catalog/selectAllList','type')
    });
    var addDialog = new BUI.Overlay.Dialog({
        title: '增加商品',
        width: 400,
        contentId: 'addGoods',
        success: function () {
            $.ajax({
                type: 'GET',
                url:'/rest/manage/order/addOrderDetail',
                data:{
                    orderID:${e.orderID!},
                    productID:$('.goods').val(),
                    price:$('.spec').val(),
                    number:1,
                    dtotal:$('.spec').val(),
                    specInfo:$('.spec').text()
                },
                dataType: 'json',
                success:function (data) {
                    window.location.reload()
                }
            })
        }
    });
    $('.type').click(function () {
       var obj={catalogID:$(this).val()};
        queryDetail('/rest/manage/product/selectAllList','goods',obj)
    });
    $('.goods').click(function () {
        var obj={productID:$(this).val()};
        queryDetail('/rest/manage/spec/selectAllList','spec',obj)
    });
    function queryDetail(url,el,obj ) {
        $.ajax({
            type: 'GET',
            url:url,
            data:obj,
            dataType: 'json',
           success:function (data) {
            var list=data.data,html='';
            $.each(list,function (i, e) {
                var val=e.name||e.combination;
                var value= el=='spec'?e.price:e.id;
                html+='<option value="'+value+'" >'+val+'</option>';
            });
               $('.'+el).html(html)
           }
        })
    }
    //删除单个用户
    function deleteOne(value,i) {
        BUI.Message.Confirm('确认要删除吗？', function () {
            $.ajax({
                type: 'POST',
                url: '${basepath}/rest/manage/orderdetail/deleteJson',
                dataType: 'json',
                data: {
                    id: value
                },
                success: function () {
                  i==0?window.location.href="/rest/manage/order/toList": window.location.reload();
                }
            });
        }, 'question');
    }
</script>
</@page.pageBase>
